<script setup lang="jsx">

import {
  SearchIcon,
} from "tdesign-icons-vue-next";
import {computed, reactive, ref, onMounted} from 'vue';
import {MessagePlugin} from "tdesign-vue-next";
import {listUserPageActivity} from "@/api/activity.js";
import {useUserStore} from "@/stores/user.js";
import router from "@/router/index.js";

const userStore = useUserStore()

// 活动卡片 --------------------------------------------------------------------

const cover = 'https://tdesign.gtimg.com/site/source/card-demo.png';

const cardClick = (activityId, activityName) => {
  router.push({path: '/user/activity/group', query: {activityId: activityId, activityName: activityName}});
}

// 搜索 --------------------------------------------------------------------------

const searchValue = ref('');
const onClear = () => {
  console.log('clear');
  search()
};
const onBlur = () => {
  console.log('blur');
  if (searchValue.value === '') {
    search()
  }
};

const search = async ()=> {
  const res = await listUserPageActivity(userStore, current.value, pageSize.value, searchValue.value, '', '', '', '', 1, '')
  activityList.value = res.data.data.records
  total.value = res.data.data.total

}

// 数据 -----------------------------------------------------------------------------------------------
const activityList = ref([])
onMounted (async ()=> {
  const res = await listUserPageActivity(userStore, current.value, pageSize.value, searchValue.value, '', '', '', '', 1, '')
  activityList.value = res.data.data.records
  total.value = res.data.data.total
})


// 分页控件 ---------------------------------------------------------------------------------------------
const current = ref(1);
const pageSize = ref(6);
const total = ref(0)

const pageSizeOption = [6, 12, 24]

const onPageSizeChange = async (size) => {
  const res = await listUserPageActivity(userStore, current.value, pageSize.value, searchValue.value, '', '', '', '', 1, '')
  activityList.value = res.data.data.records
  total.value = res.data.data.total
};

const onCurrentChange = async (index, pageInfo) => {
  const res = await listUserPageActivity(userStore, current.value, pageSize.value, searchValue.value, '', '', '', '', 1, '')
  activityList.value = res.data.data.records
  total.value = res.data.data.total
};

const onChange = (pageInfo) => {
  console.log(pageInfo);
};

</script>

<template>
  <t-layout style="
      height: 100%;                /* 继承父容器高度 */
    ">
    <t-header style="display: flex;               /* 启用flex布局 */
      align-items: center;         /* 垂直居中 */
      justify-content: center;     /* 水平居中 */
      padding-left: 2%;
      padding-right: 1%;
      background-color: #e5e5e5;
      width: auto;">
      <div style="display: flex; justify-content: center; width: 100%;">
        <div style="padding-right: 1%; width: 50%">
          <t-input v-model="searchValue" placeholder="查询活动" borderless clearable @clear="onClear"
                   @blur="onBlur"></t-input>
        </div>
        <div style="padding-right: 1%">
          <t-button shape="circle" theme="primary" @click="search">
            <template #icon>
              <SearchIcon/>
            </template>
          </t-button>
        </div>
      </div>


    </t-header>
    <t-content style="background-color: white; width: 100%; ">
      <div v-if="activityList.length !== 0" style="
        display: grid;
        grid-template-columns: repeat(auto-fill, 360px);
        justify-content: center;
        gap: 16px;
        padding-top: 2%;


  ">
        <div v-for="(item, index) in activityList">
          <t-card :cover="cover" theme="poster2" :style="{ width: '360px' }" hover-shadow @click="cardClick(item.id, item.activityName)">
            <template #footer>
              <t-comment :author=item.activityName />
              <div>最大人数: {{ item.maxNum }} | 截止时间: {{item.expirationTime}}</div>
            </template>
          </t-card>
        </div>
      </div>
      <t-space v-else direction="vertical" align="center" style="width: 100%;  padding-top: 10%">
        <t-empty />
      </t-space>

      <div style="padding-left: 2%; padding-right: 2%; padding-top: 2%">
        <t-pagination
            v-model="current"
            v-model:pageSize="pageSize"
            :total=total
            @change="onChange"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
            :pageSizeOptions="pageSizeOption"
        />
      </div>
    </t-content>


  </t-layout>

</template>

<style scoped>

</style>